
<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
  <div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
    <div style="width: 100%;">
      <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
    </div>
    <fluent-button type="button" aria-label="Close" title="Close" appearance="stealth" blazor:onclick="6" b-x1200685t0="" blazor:elementreference="xxx">
      <svg style="width: 16px; fill: var(--accent-fill-rest);" focusable="false" viewBox="0 0 24 24" aria-hidden="true" blazor:onclick="8">
        <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
      </svg>
    </fluent-button>
  </div>
  <div class="stack-horizontal fluent-dialog-footer" style="justify-content: end; align-items: end; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
    <fluent-button type="button" appearance="accent" blazor:onclick="7" b-x1200685t0="" blazor:elementreference="xxx">Close</fluent-button>
  </div>
  <div class="fluent-dialog-body">
    My body
  </div>
</fluent-dialog>